<template>
  <view class="container">
    <up-sticky bgColor="#fff" customNavHeight="0">
      <view class="header">
        <up-search placeholder="搜索活动名称" v-model="searchForm.title" :show-action="false" @clear="handleSearch" @search="handleSearch"></up-search>
      </view>
      <u-tabs :current="current" :list="tabs" keyName="title" @change="handleTabChange"></u-tabs>
    </up-sticky>
    <view class="content">
      <f-list ref="listRef" :request="getData">
        <template #default="{item, index}">
          <com-activity-item :item="item" @qrcode="handleShowQrcode(item)" @set="handleSetRed(item)"></com-activity-item>
        </template>
      </f-list>
    </view>

    <f-tabbar :current="1"></f-tabbar>
  </view>
  <!-- 活动链接 -->
  <com-qrcode-popup ref="qrcodeRef"></com-qrcode-popup>
  <!-- 设置红包 -->
  <com-set-popup ref="setRef"></com-set-popup>

</template>

<script lang="ts" setup>

import { computed, reactive, ref } from 'vue'
import { getAdminActivityListApi, getAdminCateListApi } from '@/addon/htscrm/api';
import { onLoad } from '@dcloudio/uni-app';
import { redirect } from '@/utils/common';
import FTabbar from '@/addon/htscrm/components/f-tabbar/index.vue'
import FList from '@/addon/htscrm/components/f-list/index.vue';
import ComActivityItem from './com-activity-item.vue';
import ComQrcodePopup from './com-qrcode-popup.vue';
import ComSetPopup from './com-set-popup.vue';

const listRef = ref()
const qrcodeRef = ref()

const searchForm = reactive({
  title: '',
  cate_id: 0,
})

const tabs = ref<any[]>([]); 

const current = computed({
  get() {
    if (searchForm.cate_id === 0) return 0
    return tabs.value.findIndex(item => item.id === searchForm.cate_id)
  },
  set(val) {
    searchForm.cate_id = tabs.value[val].id
  }
})

onLoad(() => {
  getAdminCateList()
})
async function getData(meta: any) {
  const params = {
    ...searchForm,
    ...meta
  }
  const res = await getAdminActivityListApi(params)
  if (res.code == 1) {
    return res.data
  }
}

async function getAdminCateList() {
  const res = await getAdminCateListApi()
  tabs.value = [{ title: '全部', id: 0 }, ...res.data]
}

function handleSearch() {
  listRef.value.reload();
}
function handleTabChange(val:any) {
  current.value = val.index
  listRef.value.reload();
}

/**
 * 显示活动链接
 * @param item 
 */
function handleShowQrcode(item:IActivityItem) {
  qrcodeRef.value.handleShowPopup(item)
}

const setRef =ref()
function handleSetRed(item:IActivityItem) {
  setRef.value.handleShowPopup(item)
}
</script>
<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f6f7f8;
  .header {
    padding: 30rpx 30rpx 0;
  }

  .u-empty {
    padding-top: 200rpx;
  }

}
</style>